<!--应用请求列表-->
<template>
    <div>
        <div class="request-list" v-show="!showDetails">
            <!--查询条件-->
            <div class="condition">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-input v-model="search.traceId" placeholder="请输入TRACE_ID"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input v-model="search.requestUrl" placeholder="请输入请求地址"></el-input>
                    </el-col>
                    <el-col :span="8">
                        <el-date-picker v-model="search.queryTime" type="datetimerange" style="width: 100%"
                                        value-format="yyyy-MM-dd HH:mm:ss" range-separator="~" start-placeholder="开始时间"
                                        end-placeholder="结束时间"></el-date-picker>
                    </el-col>
                    <el-col :span="4">
                        <el-button @click="query" type="primary" icon="el-icon-search">查询</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-divider></el-divider>
            <div class="list">
                <!--查询结果-->
                <page-table @query="loadData"
                            :tableHeader="tableHeader"
                            :tableData="tableData"
                            :total="total"
                            @cellClick="cellClick"
                ></page-table>
            </div>
        </div>
        <div v-show="showDetails">
            <Details ref="details" :detailData="row" @back="back"></Details>
        </div>
    </div>
</template>
<script>
    import PageTable from '../../components/PageTable'
    import Details from './details'
    import {queryAppDataList} from '../../request/api'

    export default {
        name: 'requestList',
        components: {
            PageTable,
            Details
        },
        data() {
            return {
                search: {},
                tableHeader: [],
                tableData: [],
                total: 0,
                showDetails: false,
                row: {}
            }
        },
        mounted() {
            this.init();
        },

        methods: {
            init() {
                this.tableHeader = [
                    {key: 'traceId', label: 'TRACE_ID', highlight: true},
                    {key: 'requestUrl', label: '请求地址'},
                    {key: 'appId', label: '应用ID', width: 120},
                    {key: 'createTime', label: '创建时间', width: 150},
                    {
                        key: 'costTime', label: '请求耗时', width: 120, formatData(val) {
                            return val + "ms";
                        }
                    },
                ];
                this.loadData(1, 10);
            },
            loadData(currPage, pageSize) {
                let params = {
                    sortField: 'create_time',
                    sortAsc: false,
                    pageSize: pageSize,
                    currPage: currPage,
                    traceId: this.search.traceId,
                    requestUrl: this.search.requestUrl,
                    startTime: this.search.queryTime && this.search.queryTime.length > 0 ? this.search.queryTime[0] : null,
                    endTime: this.search.queryTime && this.search.queryTime.length > 1 ? this.search.queryTime[1] : null
                };
                queryAppDataList(params).then(response => {
                    this.tableData = response.data.records;
                    this.total = response.data.total
                })
            },
            query() {
                this.loadData(1, 10);
            },
            cellClick(row, column, cell, event) {
                console.log(row, column, cell, event)
                this.showDetails = true;
                this.row = row;
                this.$refs.details.init(row);
            },
            back() {
                this.showDetails = false;
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
